import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import classnames from 'classnames';
import {View, Block, Text, Image, Button} from '@tarojs/components'
import {AtFloatLayout, AtIcon, AtCalendar, AtModalHeader, AtModalContent, AtModalAction, AtModal} from 'taro-ui'
import {user} from '../../utils/user.service'
import {OrderDetail, TicketItem} from '../../utils/server.interface'
import {http} from '../../utils/http'
import {
  NEW_GET_ORDER_DETAIL,
  NEW_GET_ORDER_TICKET,
  LIAN_ORDER_TICKET,
  NEW_GET_ORDER_CHECKLOG,
  GET_TICKET_CODE,
  GET_PCODE,
  REFUND,
  GET_IMG,
  RESOURCE_URL, TARO_ENV, BASE_URL, DIALOG_REFUND, CONTENT_QR,
  ALI_ORDER_TICKET,
  ALI_IS_USER_REFUND,
  ALI_REFUND, CUSTOMER_SERVICE
} from '../../constants/api'
import {convert2CamelCase, debounce, getHeadTop, vcmonitor} from '../../utils/tools'
import Headercar from "../components/header-car/header-car";
import {newHttp} from "../../utils/request";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import Float from "../../components/float/float";
import {getContent} from "../../utils/handlerPublicCode";
import {platform} from "../../utils/platform-settting.service";
import './detail.scss'

interface LogList {
  use_date: string
  check_num: number
  product_name: string
  company: string
}

const goodsType = {
  limit: 'limited',
  ticket: 'scenic',
  hotel: 'hotel',
  toursLine: 'tourist-line',
  product: 'product'
}

export default class Detail extends Component {

  state: {
    aliIsRefund: boolean
    aliTicketShow: boolean
    modalShow: any
    showDialogRefund: any
    qrImg: any
    customerInfo: any
    checkStyleMini: number
    disShow: boolean
    coupon: boolean
    searchBarTop: number
    orderInfo: any
    orderTicket: TicketItem[]
    ticketwell: TicketItem[]
    ticketing: TicketItem[]
    ticketed: TicketItem[]
    logList: LogList[]
    refunding: boolean
    backRefund: boolean
    goodDetailUrl: string
    qrcodeimg: string
    pcodeimg: string
    tMore: boolean
    codeShow: boolean
    tabsIndex: number
    ticketWxCode: string
    ticketCode: string
    ticketCanvasId: string
    openGroup: boolean
    importText: string
    assembling_place_list: any
    openAssembling: boolean
    wxCodeType: number
    popTicket: string
    supplinerName: string
    groupTicket: any
    groupIndexs: any
    product_name: string
    showCalendar: boolean
    scrollTop: number
  } = {
    aliIsRefund: false,
    aliTicketShow: false,
    modalShow: false,
    showDialogRefund: false,
    qrImg: '',
    customerInfo: [],
    checkStyleMini: 0,
    disShow: true,
    coupon: false,
    searchBarTop: 0,
    pcodeimg: '',
    qrcodeimg: '',
    orderInfo: false,
    orderTicket: [],
    codeShow: false,
    ticketwell: [],
    ticketing: [],
    ticketed: [],
    logList: [],
    backRefund: true,
    refunding: false,
    goodDetailUrl: '',
    tMore: false,
    ticketWxCode: '',
    wxCodeType: 0,
    ticketCode: '',
    tabsIndex: 0,
    openGroup: false,
    importText: '',
    assembling_place_list: [],
    openAssembling: false,
    popTicket: '',
    supplinerName: '',
    groupTicket: {},
    groupIndexs: [],
    product_name: '',
    scrollTop: 0,
    showCalendar: false
  }

  async UNSAFE_componentWillMount() {
    vcmonitor(this)
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const headTop = getHeadTop()
    const searchBarTop = headTop.statusBar > 20 ? (headTop.statusBar + headTop.top + 35) : (headTop.statusBar + headTop.top + 45)
    this.setState({
      searchBarTop
    })
  }

  async componentDidShow() {
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.switchTab({url: '/pages/my/index/index'})
      }, 1500)
      return
    }
    const {orderId, jumpType} = Taro.getCurrentInstance().router.params
    // 分销单跳转不显示接收人姓名和手机
    if (jumpType && jumpType === 'spread') {
      this.setState({disShow: false})
    }
    if (!orderId) {
      Taro.showToast({title: '参数错误', icon: 'none'})
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.navigateBack({
          delta: 1
        })
      }, 1500);
    }
    Taro.showLoading({title: '加载中...'})
    const orderInfo = await newHttp.catchGet(NEW_GET_ORDER_DETAIL, {orderId})
    if (process.env.TARO_ENV === 'tt') {
      orderInfo.refundTotalAmount = (Number(orderInfo.total_fee) * 100).toFixed(2)
    }
    let dialogRefund
    if (process.env.TARO_ENV !== 'tt') {
      dialogRefund = await newHttp.catchGet(DIALOG_REFUND, {orderId})
    }
    if (orderInfo.category == 8) {
      const aliIsRefundRes = await newHttp.catchPost(ALI_IS_USER_REFUND, {orderNum: orderInfo.order_num})
      let aliIsRefund = false
      aliIsRefund = !!(aliIsRefundRes && aliIsRefundRes === 1);
      this.setState({aliIsRefund})
    }
    const customerInfo = []
    if (orderInfo.arr) {
      for (let j = 0; j < orderInfo.arr.length; j++) {
        customerInfo.push([])
      }
    }
    if (orderInfo.col) {
      for (let i = 0; i < orderInfo.col.length; i++) {
        for (let j = 0; j < orderInfo.arr.length; j++) {
          for (const k in orderInfo.arr[j]) {
            if (k === orderInfo.col[i].id) {
              customerInfo[j].push({
                id: orderInfo.col[i].id,
                name: orderInfo.col[i].name,
                value: orderInfo.arr[j][k]
              })
            }
          }
        }
      }
    }
    let qrImg = ''
    if (dialogRefund) {
      dialogRefund = JSON.parse(dialogRefund)
      if (dialogRefund) {
        const res = await http.HGet(CONTENT_QR, {id: orderInfo.guuid});
        if (res) qrImg = res.data.code
      }
    }
    this.setState({customerInfo, showDialogRefund: dialogRefund, qrImg})
    if (orderInfo.status && orderInfo.status === 'redirect') {
      Taro.navigateTo({url: orderInfo.redirect_url})
      return
    }
    let url = '';
    if (orderInfo) {
      if (orderInfo.category == 7) {
        url = '/common/limited/localdetail?locationId=' + orderInfo.locationId + '&productId=' + orderInfo.productId;
      } else if (orderInfo.category == 8) {
        url = '/common/limited/localdetailali?locationId=' + orderInfo.locationId + '&productId=' + orderInfo.productId;
      } else {
        if (orderInfo.guuid) {
          url = `/common/${goodsType[convert2CamelCase(orderInfo.goodsType)]}/detail?itemId=${orderInfo.guuid || ''}`;
        }
      }

      if (orderInfo.assembling_place) {
        this.setState({
          assembling_place_list: JSON.parse(orderInfo.assembling_place)
        })
      }
    }
    if (orderInfo.status != '已取消' && orderInfo.is_show_ticket == 1) {
      let orderTicket
      if (orderInfo.category === 7) {
        orderTicket = await newHttp.catchPost(LIAN_ORDER_TICKET + orderId)
        if (orderTicket) {
          orderTicket = orderTicket.tickets
        }
      } else if (orderInfo.category === 8) {
        orderTicket = await newHttp.catchPost(ALI_ORDER_TICKET + orderId)
        if (orderTicket) {
          orderTicket = orderTicket.tickets
        }
      } else {
        orderTicket = await newHttp.catchGet<TicketItem[]>(NEW_GET_ORDER_TICKET, {orderId})
      }
      if (orderInfo.is_meal == 1) {
        const groupTicket = {};
        const groupIndexs = [];
        if (orderTicket && orderTicket.length > 0) {
          orderTicket.map((item) => {
            groupTicket['index_' + item.group_index] = groupTicket['index_' + item.group_index] || []
            groupTicket['index_' + item.group_index].push(item)
            if (groupIndexs.indexOf(item.group_index) == -1) {
              groupIndexs.push(item.group_index)
            }
          })
        }
        this.setState({orderInfo, orderTicket, groupTicket, groupIndexs})
      } else {
        const {ticketwell, ticketing, ticketed} = this.state
        let tabsIndex = 0
        if (orderTicket) {
          if (orderTicket.length > 0) {
            const logList = await newHttp.catchGet<LogList[]>(NEW_GET_ORDER_CHECKLOG, {orderId})
            this.setState({logList})
            orderTicket.map((item) => {
              if (item.isUse == '已使用') {
                if (process.env.TARO_ENV === 'tt' && this.globalData.canShowPayButton) {
                  return false
                }
                this.setState({
                  backRefund: false
                })
              }
            })
          }
          if (orderTicket.length > 1 || (orderTicket[0] && orderTicket[0].type && orderTicket[0].type == 2)) {
            orderTicket.map((item) => {
              if (item.can_check_num && (item.is_use < 1 || item.is_use > 5)) {
                ticketwell.push(item)
              }
              if (item.used_check_num) {
                ticketing.push(item)
              }
              if (item.can_check_num && (item.is_use > 1 && item.is_use < 5)) {
                ticketed.push(item)
              }
            })
          }
          if (ticketed.length > 0) {
            tabsIndex = 2
          }
          if (ticketing.length > 0) {
            tabsIndex = 1
          }
          if (ticketwell.length > 0) {
            tabsIndex = 0
          }
        }
        this.setState({orderInfo, orderTicket, ticketwell, ticketing, ticketed, tabsIndex, goodDetailUrl: url}, () => {
          if (tabsIndex < 2) {
            this.getWxQrcode()
          }
        })
      }
    } else {
      this.setState({orderInfo})
    }
    this.setState({checkStyleMini: await platform.info.checkStyleMini, goodDetailUrl: url})
    Taro.hideLoading()
  }

  tabs = [{title: '订单详情'}, {title: '验证码信息'}]

  copy() {
    if (this.state.orderInfo) {
      try {
        Taro.setClipboardData({
          data: this.state.orderInfo.order_num
        })
        if (process.env.TARO_ENV === 'h5') {
          Taro.showToast({title: '复制成功'})
        }
      } catch (e) {
        Taro.showToast({title: '复制失败'})
      }
    } else {
      Taro.showToast({title: '复制失败'})
    }
  }

  getIsUse(val) {
    return !(!val || val.length <= 0);
  }

  onCopy(str, e) {
    e.stopPropagation()
    try {
      Taro.setClipboardData({
        data: str
      })
      if (process.env.TARO_ENV === 'h5') {
        Taro.showToast({title: '复制成功'})
      }
    } catch (e) {
      Taro.showToast({title: '复制失败'})
    }
  }

  scanUrl(content, type) {
    if (type === 'second') { // 小码扫码出现的是本值
      return content;
    } else {
      if (this.state.checkStyleMini >= 2) {
        const qrCode = this.state.orderInfo.qrCode
        if (qrCode) {
          return qrCode
        }
      }
    }
    // if (process.env.TARO_ENV === 'h5') {
    //   content = window.location.origin + '/main/supplier/check-ticket?scene=' + content;
    //   content = encodeURIComponent(content)
    // }
  }

  onCopyShow(item, e) {
    if (item.code_type == 2) {
      Taro.previewImage({
        current: item.ticket, // 当前显示图片的http链接
        urls: [item.ticket] // 需要预览的图片http链接列表
      })
    } else if (item.code_type == 0) {
      this.onCopy(item.ticket, e)
    } else {
      try {
        Taro.setClipboardData({
          data: item.ticket
        })
        if (process.env.TARO_ENV === 'h5') {
          Taro.showToast({title: '复制成功'})
        }
        this.setState({
          importText: item.ticket
        })
      } catch (e) {
        Taro.showToast({title: '复制失败'})
      }
    }
  }

  async getWxQrcode() {
    const orderId = this.state.orderInfo && this.state.orderInfo.id
    if (this.state.checkStyleMini && this.state.checkStyleMini > 0) {
      const {orderInfo} = this.state
      if (this.state.checkStyleMini >= 1 && this.state.checkStyleMini != 2 && TARO_ENV !== 'h5' && !orderInfo.is_collusion) {
        Taro.request({
          url: http.url(GET_PCODE),
          data: {orderId},
          method: 'POST',
          header: await http.getHeader({'Content-Type': 'application/x-www-form-urlencoded'})
        }).then(res => {
          if (res.data.orderWxPcode) {
            this.setState({
              pcodeimg: res.data.orderWxPcode
            })
          }
        })
      }
      if (this.state.checkStyleMini >= 2) {
        let qrCode = ''
        // if (process.env.P_ENV === 'kd') {
        qrCode = this.state.orderInfo.qrCode
        // } else {
        //   qrCode = this.state.orderInfo.is_meal == 1 ? this.state.orderInfo.qrCode : this.state.orderTicket[0].ticket
        // }
        if (qrCode) {
          this.setState({
            qrcodeimg: qrCode
          })
        }
      }
    }
  }

  stopTop(e) {
    e.stopPropagation()
  }

  refundAikucun(e) {
    e.stopPropagation()
    const {orderId} = Taro.getCurrentInstance().router.params
    Taro.navigateTo({url: '/main/order/aftersales/type?orderId=' + orderId})
  }

  refund(e) {
    e.stopPropagation()
    this.setState({refunding: true}, () => {
      Taro.showModal({
        title: '提示',
        content: '确认申请退款？',
        success: async (res) => {
          if (res.confirm) {
            const ret = await http.post(REFUND, {oid: (this.state.orderInfo && this.state.orderInfo.id) || 0})
            if (ret) {
              Taro.showLoading({title: '加载中...'})
              const orderInfo = await newHttp.catchGet<OrderDetail>(NEW_GET_ORDER_DETAIL, {orderId: (this.state.orderInfo && this.state.orderInfo.id) || 0})
              if (orderInfo.status && orderInfo.status === 'redirect') {
                Taro.navigateTo({url: orderInfo.redirect_url})
                return
              }
              const orderTicket = newHttp.catchGet<TicketItem[]>(NEW_GET_ORDER_TICKET, {orderId: (this.state.orderInfo && this.state.orderInfo.id) || 0})
              if (orderInfo.is_meal == 1) {
                const groupTicket = {}
                const groupIndexs = []
                if (orderTicket && orderTicket.length > 0) {
                  orderTicket.map((item) => {
                    groupTicket['index_' + item.group_index] = groupTicket['index_' + item.group_index] || []
                    groupTicket['index_' + item.group_index].push(item)
                    if (groupIndexs.indexOf(item.group_index) == -1) {
                      groupIndexs.push(item.group_index)
                    }
                  })
                }
                this.setState({orderInfo, orderTicket, groupTicket, groupIndexs})
              } else {
                const {ticketwell, ticketing, ticketed} = this.state
                let tabsIndex = 0
                if (orderTicket.length > 1 || (orderTicket.length > 0 && orderTicket[0].type == 2)) {
                  orderTicket.map((item) => {
                    if (item.can_check_num && (item.is_use < 1 || item.is_use > 5)) {
                      ticketwell.push(item)
                    }
                    if (item.used_check_num) {
                      ticketing.push(item)
                    }
                    if (item.can_check_num && (item.is_use > 1 && item.is_use < 5)) {
                      ticketed.push(item)
                    }
                  })
                  if (ticketed.length > 0) {
                    tabsIndex = 2
                  }
                  if (ticketing.length > 0) {
                    tabsIndex = 1
                  }
                  if (ticketwell.length > 0) {
                    tabsIndex = 0
                  }
                }
                this.setState({orderInfo, orderTicket, ticketwell, ticketing, ticketed, tabsIndex})
              }

              Taro.hideLoading()
              Taro.showToast({title: '退款申请提交成功！', icon: 'none'})
            }
          }
          if (res.cancel) {
            this.setState({refunding: false})
          }
        }
      })
    })
  }

  contactCustomerRefund(e) {
    e.stopPropagation()
    this.setState({modalShow: true})
  }

  ticketMore(tMore) {
    this.setState({
      tMore: !tMore
    })
  }

  checkTabs(tabsIndex) {
    this.setState({tabsIndex})
  }

  async aliOrderRefund(e) {
    e.stopPropagation()
    const {orderInfo} = this.state
    Taro.showModal({
      title: '提示',
      content: '确认申请退款？',
      success: async (res) => {
        if (res.confirm) {
          Taro.showLoading({title: '加载中...'})
          const refundResult = await newHttp.catchPost(ALI_REFUND + orderInfo.order_num)
          if (refundResult) {
            const orderInfo = await newHttp.catchGet<OrderDetail>(NEW_GET_ORDER_DETAIL, {orderId: (this.state.orderInfo && this.state.orderInfo.id) || 0})
            if (orderInfo.status && orderInfo.status === 'redirect') {
              Taro.navigateTo({url: orderInfo.redirect_url})
              return
            }
            const orderTicket = newHttp.catchGet<TicketItem[]>(NEW_GET_ORDER_TICKET, {orderId: (this.state.orderInfo && this.state.orderInfo.id) || 0})
            if (orderInfo.is_meal == 1) {
              const groupTicket = {}
              const groupIndexs = []
              if (orderTicket && orderTicket.length > 0) {
                orderTicket.map((item) => {
                  groupTicket['index_' + item.group_index] = groupTicket['index_' + item.group_index] || []
                  groupTicket['index_' + item.group_index].push(item)
                  if (groupIndexs.indexOf(item.group_index) == -1) {
                    groupIndexs.push(item.group_index)
                  }
                })
              }
              this.setState({orderInfo, orderTicket, groupTicket, groupIndexs})
            } else {
              const {ticketwell, ticketing, ticketed} = this.state
              let tabsIndex = 0
              if (orderTicket.length > 1 || (orderTicket.length > 0 && orderTicket[0].type == 2)) {
                orderTicket.map((item) => {
                  if (item.can_check_num && (item.is_use < 1 || item.is_use > 5)) {
                    ticketwell.push(item)
                  }
                  if (item.used_check_num) {
                    ticketing.push(item)
                  }
                  if (item.can_check_num && (item.is_use > 1 && item.is_use < 5)) {
                    ticketed.push(item)
                  }
                })
                if (ticketed.length > 0) {
                  tabsIndex = 2
                }
                if (ticketing.length > 0) {
                  tabsIndex = 1
                }
                if (ticketwell.length > 0) {
                  tabsIndex = 0
                }
              }
              this.setState({orderInfo, orderTicket, ticketwell, ticketing, ticketed, tabsIndex})
            }

            Taro.hideLoading()
            Taro.showToast({title: '退款申请提交成功！', icon: 'none'})
          }
        }
        if (res.cancel) {
          this.setState({refunding: false})
        }
      }
    })
  }

  aliPreviewCode(url) {
    Taro.previewImage({
      current: BASE_URL + GET_IMG + url, // 当前显示图片的http链接
      urls: [BASE_URL + GET_IMG + url] // 需要预览的图片http链接列表
    })
  }

  async showCode(item) {
    const {ticketCanvasId, orderInfo} = this.state
    if (orderInfo.category === 7) {
      Taro.previewImage({
        current: item.qrcode, // 当前显示图片的http链接
        urls: [item.qrcode] // 需要预览的图片http链接列表
      })
    } else if (orderInfo.category === 8) {
      if (item.channelStatus == 1) {
        this.setState({
          aliTicketShow: true,
          codeShow: true,
          product_name: orderInfo.name,
          ticketWxCode: item.ticket_url,
          popTicket: item.ticket
        })
      }
    } else {
      if (item.code_type == 0) {
        const ret = await http.HGet(GET_TICKET_CODE, {ticketId: item.id})
        if (ret) {
          if (this.state.checkStyleMini && this.state.checkStyleMini > 0) {
            if (this.state.checkStyleMini >= 1 && this.state.checkStyleMini != 2 && !orderInfo.is_collusion) {
              this.setState({
                aliTicketShow: false,
                codeShow: true,
                product_name: item.product_name,
                ticketWxCode: ret.ticketWxCode,
                wxCodeType: item.type,
                popTicket: item.ticket
              })
            }
            if (this.state.checkStyleMini >= 2) {
              this.setState({
                codeShow: true,
                aliTicketShow: false,
                product_name: item.product_name,
                ticketCode: ret.ticketCode,
                wxCodeType: item.type,
                popTicket: item.ticket
              }, () => {
              })
            }
          }
        }
      } else if (item.code_type == 2) {
        Taro.previewImage({
          current: item.ticket, // 当前显示图片的http链接
          urls: [item.ticket] // 需要预览的图片http链接列表
        })
      } else {
        this.setState({
          importText: item.ticket
        })
      }
    }
  }

  async goshowCode(item) {
    if (item.is_need_reserve === 2) {
      return
    }
    const ret = await http.HGet(GET_TICKET_CODE, {ticketId: item.id})
    if (ret) {
      if (this.state.checkStyleMini && this.state.checkStyleMini > 0) {
        if (this.state.checkStyleMini >= 1 && this.state.checkStyleMini != 2) {
          this.setState({
            codeShow: true,
            aliTicketShow: false,
            ticketWxCode: ret.ticketWxCode,
            product_name: item.product_name,
            wxCodeType: item.type,
            popTicket: item.ticket,
            supplinerName: item.supplier_company
          })
        }
        if (this.state.checkStyleMini >= 2) {
          this.setState({
            codeShow: true,
            aliTicketShow: false,
            ticketCode: ret.ticketCode,
            product_name: item.product_name,
            wxCodeType: item.type,
            popTicket: item.ticket,
            supplinerName: item.supplier_company
          }, () => {
          })
        }
      }
    }
  }

  showImg(orderInfo) {
    // const urls = imgStr.split(",")
    Taro.previewImage({
      current: orderInfo.arr && orderInfo.arr[0] && orderInfo.arr[0].upload_file,
      urls: orderInfo.arr[0].upload_file,
    })
  }

  showImgCustomer(img) {
    Taro.previewImage({
      current: img,
      urls: img,
    })
  }

  showImgFace(imgStr) {
    const urls = [imgStr]
    Taro.previewImage({
      current: imgStr,
      urls,
    })
  }

  handleClose() {
    this.setState({
      importText: ''
    })
  }

  hideCode(e) {
    e.stopPropagation()
    this.setState({
      codeShow: false
    })
  }

  handleClickGroup() {
    const openGroup = this.state.openGroup
    this.setState({
      openGroup: !openGroup
    })
  }

  handleAssembling() {
    const openAssembling = this.state.openAssembling
    this.setState({
      openAssembling: !openAssembling
    })
  }

  couponOpen() {
    const coupon = this.state.coupon
    this.setState({
      coupon: !coupon
    })
  }

  goInfo(url) {
    const {orderInfo} = this.state
    if (orderInfo.seckill_id) {
      const urlPath = `/common/seckill/detail?itemId=${orderInfo.goods_id}&seckill_id=${orderInfo.seckill_id}`;
      Taro.redirectTo({url: urlPath})
    } else {
      if (url) {
        Taro.redirectTo({url})
      }
    }
  }

  calendarClose() {
    this.setState({showCalendar: false})
  }

  onPageScroll = debounce((scroll) => {
    this.setState({scrollTop: scroll[0].scrollTop})
  }, 10)

  async toService() {
    const ret = await http.carGet(CUSTOMER_SERVICE)
    Taro.navigateTo({
      url: '/main/webview/index?notCarryToken=true&url=' + ret
    })
  }

  globalData = Taro.getApp().globalData

  // 去预约
  goAppointment(id, uuid, goodsUuid, appointmentId) {
    Taro.navigateTo({
      url: `/pages/order/appointment-make?id=${id}&uuid=${uuid}&goodsUuid=${goodsUuid}&appointmentId=${appointmentId}`
    });
  }

  // 查看预约
  viewAppointment(order_uuid, appointmentId) {
    Taro.navigateTo({
      url: `/pages/order/appointment-detail?uuid=${order_uuid}&appointmentId=${appointmentId}`
    });
  }

  // 取消预约
  cancelAppointment(item) {
    Taro.navigateTo({
      url: `/pages/order/appointment-cancel?uuid=${item.uuid}&reserve_id=${item.reserve_id}`
    });
  }

  showPayBtnCondition = () => {
    const {orderInfo, backRefund} = this.state
    let flag = true
    if (orderInfo.delivery_type === 1) {
      flag = false
    }
    return flag && (orderInfo && orderInfo.order_status == 1 && orderInfo.is_allow_refund == 1) && backRefund && orderInfo.pay_type != 4 && orderInfo.pay_type != 5 && !orderInfo.refuse_refund_reason
  }

  render() {
    const {
      aliIsRefund,
      modalShow,
      showDialogRefund,
      qrImg,
      scrollTop,
      showCalendar,
      codeShow,
      aliTicketShow,
      product_name,
      importText,
      searchBarTop,
      orderInfo,
      orderTicket,
      assembling_place_list,
      groupTicket,
      groupIndexs,
      coupon,
      popTicket,
      wxCodeType,
      openAssembling,
      goodDetailUrl,
      openGroup,
      backRefund,
      qrcodeimg,
      pcodeimg,
      logList,
      tabsIndex,
      ticketwell,
      ticketing,
      ticketed,
      ticketWxCode,
      ticketCode,
      disShow,
      customerInfo
    } = this.state
    if (!orderInfo) {
      return
    }
    let goodsGroup: { name: string; num: number; good_id: number }[] = []
    if (orderInfo.goods_group) {
      const goodsGroupRet = JSON.parse(orderInfo.goods_group)
      if (goodsGroupRet && goodsGroupRet.length > 0) {
        goodsGroup = goodsGroupRet
      }
    }
    return (
      <View className={`order-warp-root ${orderInfo.group_activity_id && 'is-p-t'}`}>
        <GzhAuth />
        {TARO_ENV === 'weapp' && <View className='head-bg'
          style={`z-index: ${codeShow ? 9 : 9999};height: ${!orderInfo.group_activity_id ? searchBarTop : searchBarTop - 13}px;background-size: 100% ${scrollTop >= 22 ? 60 : 100}%;background: #f3f3f3;`}
        >
          <Headercar color='black' title='订单详情' tabColor='black' shu='black'
            backgroundColor={`${orderInfo.group_activity_id && '#ffde0e'}`} bcolor='black'
          />
        </View>}
        <View>
          {!orderInfo.group_activity_id &&
            <View className={`order-top ${TARO_ENV + 'not-team'} ${!orderInfo.group_activity_id && 'not-team'}`}
              style={`z-index: ${scrollTop >= 22 ? 'inherit' : codeShow ? 9 : 999}`}
            >
              {orderInfo && <View className='status'>{orderInfo.status === '申请退款' ? '申请退款中' : orderInfo.status}</View>}
              {orderInfo.status == "已退款" && orderInfo.refund_type != undefined && orderInfo.refund_type != 3 &&
                <View className='sms'>
                  已退款退至您的{orderInfo.refund_type == 0 ? '微信' : (orderInfo.refund_type == 1 ? '余额账户' : '授信账户')}，请注意查收~
                </View>}
              {!!orderInfo.refuse_refund_reason &&
                <View className='refund_reason'>{orderInfo.refuse_refund_reason}</View>}
            </View>}
          <View className={`ticket-box-top ${orderInfo.group_activity_id && 'is-p-team'}`}
            style={`z-index: ${scrollTop >= 22 ? 'inherit' : codeShow ? 9 : 999}`}
          >
            {orderInfo.group_activity_id && <View className='group-box-order-detail'>
              <View className='group-box-order-detail-box'>
                <View><AtIcon size='26px' prefixClass='car' value='icongoumaichenggong-01' color='#000' /></View>
                <View className='group-box-order-detail-right-info'>
                  <View className='group-box-order-detail-title'>
                    {orderInfo.now_status_step === -1 ? '拼团失败' : ''}
                    {orderInfo.now_status_step === 1 ? '买家已付款，等待成团' : ''}
                    {orderInfo.now_status_step === 2 ? !!orderInfo.category ? '已成团，等待商家发货' : '已成团' : ''}
                    {(orderInfo.now_status_step === 3 && !!orderInfo.category) ? '商家已发货，等待收货～' : ''}
                    {orderInfo.now_status_step === 4 ? '交易已完成' : ''}
                  </View>
                  <View
                    className='group-box-order-detail-info'
                  >{orderInfo.info_str ? orderInfo.info_str : orderInfo.status == '已取消' && '交易已取消'}</View>
                </View>
              </View>
              <View className='at-steps'>
                <View
                  className={`at-steps__item ${orderInfo.now_status_step >= 1 ? 'at-steps__item--active' : 'at-steps__item--inactive'}`}
                >
                  <View className='at-steps__circular-wrap'>
                    <View className='at-steps__circular'>
                      {orderInfo.now_status_step >= 1 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01-01' size='12px' prefixClass='car' />}
                      {orderInfo.now_status_step < 1 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01' size='8px' prefixClass='car' />}
                    </View>
                    <View className='at-steps__right-line' />
                  </View>
                  <View className='at-steps__title'>买家已付款</View>
                </View>
                <View
                  className={`at-steps__item ${orderInfo.now_status_step >= 2 ? 'at-steps__item--active' : 'at-steps__item--inactive'}`}
                >
                  <View className='at-steps__circular-wrap'>
                    <View className='at-steps__left-line' />
                    <View className='at-steps__circular'>
                      {orderInfo.now_status_step >= 2 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01-01' size='12px' prefixClass='car' />}
                      {orderInfo.now_status_step < 2 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01' size='8px' prefixClass='car' />}
                    </View>
                    <View className='at-steps__right-line' />
                  </View>
                  <View className='at-steps__title'>已成团</View>
                </View>
                {!!orderInfo.category && <View
                  className={`at-steps__item ${orderInfo.now_status_step >= 3 ? 'at-steps__item--active' : 'at-steps__item--inactive'}`}
                >
                  <View className='at-steps__circular-wrap'>
                    <View className='at-steps__left-line' />
                    <View className='at-steps__circular'>
                      {orderInfo.now_status_step >= 3 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01-01' size='12px' prefixClass='car' />}
                      {orderInfo.now_status_step < 3 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01' size='8px' prefixClass='car' />}
                    </View>
                    <View className='at-steps__right-line' />
                  </View>
                  <View className='at-steps__title'>商家已发货</View>
                </View>}
                <View
                  className={`at-steps__item ${orderInfo.now_status_step >= 4 ? 'at-steps__item--active' : 'at-steps__item--inactive'}`}
                >
                  <View className='at-steps__circular-wrap'>
                    <View className='at-steps__left-line' />
                    <View className='at-steps__circular'>
                      {orderInfo.now_status_step >= 4 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01-01' size='12px' prefixClass='car' />}
                      {orderInfo.now_status_step < 4 &&
                        <AtIcon value='icona-2tubiaozhizuomoban-01' size='8px' prefixClass='car' />}
                    </View>
                  </View>
                  <View className='at-steps__title'>交易已完成</View>
                </View>
              </View>
            </View>}
            <View className='border-b-r'>
              <View className={`ticket-top ticket-top-info ${orderInfo.group_activity_id && 'group-order'}`}>
                <View className={`ticket-top-order ${process.env.TARO_ENV}`}
                  onClick={this.copy.bind(this)}
                ><Text className='order-num-text'>订单号 {orderInfo && orderInfo.order_num}</Text><Text
                  className='click-copy'
                >点击复制</Text></View>
                <View className='ticket-top-goods'>
                  <View className='ticket-top-img-box' onClick={this.goInfo.bind(this, goodDetailUrl)}>
                    <Image className='ticket-top-img' src={orderInfo.default_img_url} mode='aspectFill' />
                  </View>
                  <View className='ticket-top-text'>
                    <View
                      className='ticket-top-name'
                    >{orderInfo.goods_group ? orderInfo.product_name : orderInfo.name}</View>
                    <View className='ticket-top-fee'>
                      {(!!orderInfo && !!orderInfo.unit_fee && orderInfo.pay_type != 4) &&
                        <View className='ticket-top-price'><Text className='symbol'>￥</Text><Float
                          value={orderInfo.unit_fee}
                        /></View>}
                      {(!!orderInfo && orderInfo.unit_fee == 0) &&
                        <View className='ticket-top-price'><Text className='symbol'>￥</Text><Float
                          value={orderInfo.unit_fee}
                        /></View>}
                      <View className='ticket-top-num'>x{orderInfo && orderInfo.buy_amount}</View>
                    </View>
                    {process.env.TARO_ENV !== 'tt' && <Block>
                      {!aliIsRefund && !orderInfo.is_aikucun && orderInfo.tickets_check_status != 2 && !orderInfo.group_activity_id && process.env.P_ENV !== 'kd' &&
                        <View className='back-pay'>
                          {orderInfo && orderInfo.is_can_refund && backRefund &&
                            <View className='text' onClick={this.refund.bind(this)} type='secondary'>申请退款</View>}
                          {(orderInfo && orderInfo.order_status == 90 && orderInfo.is_allow_refund == 1) &&
                            <View onClick={this.stopTop.bind(this)} className='text'>退款处理中</View>}
                        </View>}
                      {!aliIsRefund && showDialogRefund && process.env.P_ENV === 'kd' && qrImg && qrImg !== 'variable_code_close' &&
                        <View className='back-pay'>
                          <View className='text' onClick={this.contactCustomerRefund.bind(this)}
                            type='secondary'
                          >申请退款</View>
                        </View>}
                      {aliIsRefund && orderInfo.category === 8 && orderInfo.order_status == 1 &&
                        <View className='back-pay'>
                          <View className='text' onClick={this.aliOrderRefund.bind(this)}
                            type='secondary'
                          >申请退款</View>
                        </View>}
                      {!!orderInfo.is_aikucun &&
                        <View className='qikucun-refund'>
                          {orderInfo && orderInfo.is_can_refund && backRefund &&
                            <View className='text' onClick={this.refundAikucun.bind(this)}
                              type='secondary'
                            >申请售后</View>}
                        </View>}
                    </Block>}

                    {process.env.TARO_ENV === 'tt' && <Block>
                      {/*原逻辑: pInfo.site_mode == 0*/}
                      {/*新逻辑: 待预约(dealStatus: -1)取消完成(dealStatus: 3)*/}
                      {
                        (this.showPayBtnCondition() || (this.showPayBtnCondition() && orderInfo.can_refund_num > 0)) &&
                        <View className='detail-refund' style='margin-top: 24px;'>
                          {
                            (orderInfo.order_type !== 2 || (orderInfo.order_type === 2 && (orderInfo.dealStatus === -1 || orderInfo.dealStatus === 3))) &&
                            <zijie-pay-button
                              order-status={1}
                              mode={1}
                              order-id={orderInfo.order_num}
                              refund-total-amount={orderInfo.refundTotalAmount}
                            />
                          }
                        </View>
                      }
                      {/*-1: 待预约, 0: 预约中, 1: 预约成功, 2: 预约失败, 3: 取消预约*/}
                      {
                        orderInfo.order_type === 2 && (orderInfo.status === '待使用') && (orderInfo.dealStatus === -1 || orderInfo.dealStatus === 2) &&
                        <View
                          className='btn-item primary_red'
                          onClick={() => this.goAppointment(`${orderInfo.id}`, `${orderInfo.uuid}`, `${orderInfo.buy_again_goods_uuid}`, `${orderInfo.appointmentId}`)}
                        >去预约</View>
                      }
                      {/*已付款 & 已完成  预约中 / 预约成功 / 完成*/}
                      {
                        orderInfo.order_type === 2 && (orderInfo.status === '待使用') && (orderInfo.dealStatus === 0 || orderInfo.dealStatus === 1) &&
                        <View
                          className='btn-item primary_red'
                          onClick={() => this.viewAppointment(`${orderInfo.uuid}`, `${orderInfo.appointmentId}`)}
                        >查看预约单</View>
                      }
                      {
                        orderInfo.order_type === 2 && (orderInfo.status === '待使用') && (orderInfo.dealStatus === 0 || orderInfo.dealStatus === 1) &&
                        <View className='btn-item primary_red'
                          onClick={() => this.cancelAppointment(orderInfo)}
                        >取消预约单</View>
                      }
                    </Block>}
                  </View>
                </View>
              </View>
              <Block>
                {/*核验码主码*/}
                {(process.env.TARO_ENV !== 'tt' ? true : ((!!this.globalData && !this.globalData.canShowConsumeCard) || orderInfo.delivery_type === 0) && orderInfo.order_type !== 2) && (orderInfo.category !== 7 && orderInfo.category !== 8) && Number(orderInfo.is_show_ticket) === 1 && orderInfo.is_show_code &&
                  <View
                    className={`ticket-top-info ticket-top-info-b ${((this.scanUrl(pcodeimg, 'first') && orderTicket && orderTicket[0] && orderTicket[0].type != 2) || (qrcodeimg && !orderInfo.inventoryTransshipment)) && 'ticket-top-info-b-t'}`}
                  >
                    <View className='ticket-top-info-b-line' />
                    <View className='qrbox'>
                      {/*  {orderInfo.is_meal == 1 &&
                  <Block>
                    {groupIndexs.length <= 1 && orderInfo.status != "已退款" &&
                    <View className='code-shuoming'>{orderInfo.meal_type && <Text>{orderInfo.meal_type}</Text>}</View>}
                  </Block>
                  }*/}
                      {orderInfo.open_tickets_hidden_by_sms != '1' ?
                        <Block>
                          {orderTicket && orderTicket.length > 0 && <Block>
                            {(orderTicket && orderTicket[0] && orderTicket[0].type != 2) ?
                              <Block>
                                <View className='border-b-r'>
                                  <View
                                    className={((orderTicket[0].can_check_num && orderTicket[0].is_use > 1 && orderTicket[0].is_use < 5) || (orderTicket[0].can_check_num === 0 && orderTicket[0].is_use == 1)) ? "onle-ticket filter" : "onle-ticket"}
                                  >
                                    {orderTicket[0].is_use > 0 && orderTicket[0].is_use < 5 &&
                                      <View className='onle-ticket-img'>
                                        {orderTicket[0].is_use == 1 &&
                                          <Image src={RESOURCE_URL + "/resources/weapp/images/status1.png"} />}
                                        {orderTicket[0].is_use == 4 &&
                                          <Image src={RESOURCE_URL + "/resources/weapp/images/status4.png"} />}
                                        {orderTicket[0].is_use == 2 &&
                                          <Image src={RESOURCE_URL + "/resources/weapp/images/status2.png"} />}
                                      </View>}

                                    {orderTicket[0].type == 2 ?
                                      <Block>
                                        {(orderTicket[0].code_type == 0 || orderTicket[0].code_type == 3) ? <View
                                          className='t_ticket_import'
                                        >{orderTicket[0].code_type == 3 ? '' : orderTicket[0].ticket}{orderTicket[0].code_type == 3 &&
                                            <Text
                                              onClick={this.onCopyShow.bind(this, orderTicket[0])}
                                            >查看复制</Text>}</View>
                                          :
                                          <View className='t_ticket'
                                            onClick={this.showCode.bind(this, orderTicket[0])}
                                          >查看</View>
                                        }
                                      </Block>
                                      :
                                      <View className='t_ticket'
                                        onClick={this.onCopy.bind(this, orderInfo.is_meal == 1 ? orderInfo.qrCode : orderTicket[0].ticket)}
                                      >{orderInfo.category == 6 ? "取票码" : "核验码"}:<Text
                                        selectable
                                      >{orderInfo.is_meal == 1 ? orderInfo.qrCode : orderTicket[0].ticket}</Text><Image
                                        className={`img img${process.env.TARO_ENV}`}
                                        src='https://resource.ivcheng.com/upload/images/20210419/1618801235523_500.png'
                                      /></View>
                                    }
                                    <View
                                      className='code-box'
                                    >{pcodeimg && orderTicket && orderTicket[0] && orderTicket[0].type != 2 &&
                                      <Image className='qrimg' src={pcodeimg} />}
                                      {this.scanUrl(qrcodeimg, 'first') && !orderInfo.inventoryTransshipment &&
                                        <Image className='qrimg'
                                          src={BASE_URL + GET_IMG + this.scanUrl(qrcodeimg, 'first')}
                                        />
                                      }
                                    </View>
                                    <View className='code-shuoming'>
                                      {pcodeimg && orderTicket && orderTicket[0] && orderTicket[0].type != 2 &&
                                        <Text>支持微信核验</Text>}
                                      {qrcodeimg && <Text>支持设备核验</Text>}
                                    </View>

                                  </View>
                                </View>
                              </Block>
                              :
                              <Block>
                                {(ticketwell.length > 0 && ticketing.length > 0) || (ticketwell.length > 0 && ticketed.length > 0) || (ticketing.length > 0 && ticketed.length > 0) ?
                                  <View className='ticket-tabs'>
                                    {ticketwell.length > 0 &&
                                      <View className={tabsIndex == 0 ? 'ticket-tabs_item on' : 'ticket-tabs_item'}
                                        onClick={this.checkTabs.bind(this, 0)}
                                      >未使用</View>}
                                    {ticketing.length > 0 &&
                                      <View className={tabsIndex == 1 ? 'ticket-tabs_item on' : 'ticket-tabs_item'}
                                        onClick={this.checkTabs.bind(this, 1)}
                                      >已完成</View>}
                                    {ticketed.length > 0 &&
                                      <View className={tabsIndex == 2 ? 'ticket-tabs_item on' : 'ticket-tabs_item'}
                                        onClick={this.checkTabs.bind(this, 2)}
                                      >已过期</View>}
                                  </View>
                                  :
                                  <View />
                                }
                                {tabsIndex == 0 && orderTicket && orderTicket[0].type != 2 && (orderInfo.category !== 7 && orderInfo.category !== 8) &&
                                  <View className='public_code'>
                                    <View className='code-box'>{pcodeimg && orderTicket && orderTicket[0].type != 2 &&
                                      <Image className='qrimg'
                                        src={pcodeimg}
                                      />}{this.scanUrl(qrcodeimg, 'first') && !orderInfo.inventoryTransshipment &&
                                      <Image className='qrimg'
                                        src={BASE_URL + GET_IMG + this.scanUrl(qrcodeimg, 'first')}
                                      />}</View>
                                    <View className='code-shuoming'>
                                      {pcodeimg && orderTicket && orderTicket[0].type != 2 && <Text>支持微信核验</Text>}
                                      {qrcodeimg && <Text>支持设备核验</Text>}
                                    </View>
                                    <View className='public_code_tips'>核验以上二维码即可消费多个订单</View>
                                  </View>}
                                <View className='ticket-tabs-content'>
                                  {tabsIndex == 1 && ticketing.map(item => <View className='ticket-box' key={item.id}>
                                    <View className='ticket-num'>
                                      <View className='ticket-num-title'>验证码({item.check_num}张)</View>
                                      <View className={item.code_type == 2 ? "num num-img" : "num"}
                                        onClick={this.onCopyShow.bind(this, item)}
                                      ><Text>{item.code_type == 2 ? '点击查看' : '点击复制'}</Text>{item.code_type == 2 ?
                                        <Image mode='widthFix' src={item.ticket} /> : item.ticket}</View>
                                    </View>
                                    <View className='ticket-state'>
                                      <View>状态</View>
                                      <View className='state'>已完成{item.used_check_num}张</View>
                                    </View>
                                  </View>)}
                                  {tabsIndex == 2 && ticketed.map(item => <View className='ticket-box' key={item.id}>
                                    <View className='ticket-num'>
                                      <View className='ticket-num-title'>验证码({item.check_num}张)</View>
                                      <View style='display: flex;align-items:center;justify-content: space-between;'
                                        className={item.code_type == 2 ? "num num-img" : "num"}
                                        onClick={this.onCopyShow.bind(this, item)}
                                      >
                                        {item.code_type == 2 ? <Image mode='widthFix' src={item.ticket} /> : item.ticket}
                                        <Text style='white-space: nowrap'
                                          decode
                                        >{item.code_type == 2 ? '点击查看 ' : '点击复制 '}</Text>
                                      </View>
                                    </View>
                                    <View className='ticket-state'>
                                      <View>状态</View>
                                      <View className='state'>已过期{item.can_check_num}张</View>
                                    </View>
                                  </View>)}
                                </View>
                              </Block>}
                          </Block>}</Block> :
                        <View style='text-align:center;padding:10px;'>
                          <View className='t_ticket' style='color:#f3b12a'>请凭短信内容进行核销</View>
                        </View>
                      }
                    </View>
                  </View>}
                {/*阿里本地生活只有一个核验码时，会呈现主码形式，多个核验码时，呈现列表的形式*/}
                {(process.env.TARO_ENV !== 'tt' ? true : ((!!this.globalData && !this.globalData.canShowConsumeCard) || orderInfo.delivery_type === 0) && orderInfo.order_type !== 2) && (orderInfo.category === 8) && Number(orderInfo.is_show_ticket) === 1 && orderInfo.is_show_code && orderTicket && orderTicket.length == 1 &&
                  <View
                    className={`ticket-top-info ticket-top-info-b ${((this.scanUrl(pcodeimg, 'first') && orderTicket && orderTicket[0] && orderTicket[0].type != 2) || (qrcodeimg && !orderInfo.inventoryTransshipment)) && 'ticket-top-info-b-t'}`}
                  >
                    <View className='ticket-top-info-b-line' />
                    <View className='qrbox'>
                      {orderTicket && orderTicket.length > 0 && <Block>
                        {orderTicket && orderTicket[0] &&
                          <Block>
                            <View className='border-b-r'>
                              <View
                                className={(Number(orderTicket[0].isUse) >= 1 && Number(orderTicket[0].isUse) < 5) ? "onle-ticket filter" : "onle-ticket"}
                              >
                                {/*标识是否显示已使用/未使用的图片的*/}
                                {this.getIsUse(orderTicket) && Number(orderTicket[0].isUse) > 0 && Number(orderTicket[0].isUse) < 5 &&
                                  <View className='onle-ticket-img onle-ticket-img-ali'>
                                    {this.getIsUse(orderTicket) && Number(orderTicket[0].isUse) == 1 &&
                                      <Image src={RESOURCE_URL + "/resources/weapp/images/status1.png"} />}
                                    {this.getIsUse(orderTicket) && Number(orderTicket[0].isUse) == 4 &&
                                      <Image src={RESOURCE_URL + "/resources/weapp/images/status4.png"} />}
                                    {this.getIsUse(orderTicket) && Number(orderTicket[0].isUse) == 2 &&
                                      <Image src={RESOURCE_URL + "/resources/weapp/images/status2.png"} />}
                                  </View>}
                                <View className='t_ticket'
                                  onClick={(this.getIsUse(orderTicket) && Number(orderTicket[0].isUse) > 0 && Number(orderTicket[0].isUse) < 5) ? '' : this.onCopy.bind(this, this.getIsUse(orderTicket) ? orderTicket[0].ticket : '')}
                                >核验码:<Text
                                  selectable
                                >{orderTicket[0].ticket}</Text>
                                  <Image
                                    className={`img img${process.env.TARO_ENV}`}
                                    src='https://resource.ivcheng.com/upload/images/20210419/1618801235523_500.png'
                                  /></View>
                                <Text className='koubei-text-ali'>请使用口碑核销</Text>
                                <View className='code-box'>
                                  <Image className='qrimg'
                                    src={BASE_URL + GET_IMG + this.scanUrl(orderTicket[0].ticket, 'second')}
                                  />
                                </View>
                              </View>
                            </View>
                          </Block>}
                      </Block>}
                    </View>
                  </View>}
              </Block>
            </View>
          </View>
          {
            (!!this.globalData && this.globalData.canShowConsumeCard) && orderInfo.delivery_type === 1 && orderInfo.status !== '已取消' && <zijie-consume-card order-id={orderInfo.order_num} />
          }
          {orderInfo.is_show_code && orderTicket && (orderInfo.category === 7 || (orderInfo.category === 8 && orderTicket && orderTicket.length > 1)) && orderInfo.open_tickets_hidden_by_sms != '1' && orderTicket.map(item =>
            <View className='ticket-box-well'
              onClick={this.showCode.bind(this, item)}
              key={item.id}
            >
              <View className='ticket-well-num'>
                <View className='ticket-well-num-box'>
                  <Text>核验码：{item.ticket}</Text>
                  {orderInfo.category === 8 && <View className='qr-code-image-not-meal'><Image
                    src='https://resource.ivcheng.com/upload/images/20211004/1633338584052_434.png' className='img'
                    mode='aspectFill'
                  /></View>}
                </View>
              </View>
              <View className='ticket-well-state'>
                <View>{Number(item.channelStatus) === 0 && <Text>未支付</Text>}{Number(item.channelStatus) === 1 &&
                  <Text>已付款</Text>}{Number(item.channelStatus) === 3 &&
                  <Text>已核销</Text>}{Number(item.channelStatus) >= 5 &&
                  <Text>已退款</Text>}</View>
                <View>{item.valid_date_start} - {item.valid_date_end}</View>
              </View>
            </View>)}
          {/*非套餐普通商品的单品核验码*/}
          {orderInfo.is_show_code && tabsIndex == 0 && !orderInfo.is_meal && orderInfo.open_tickets_hidden_by_sms != '1' && ticketwell.map(item =>
            <View
              className={item.type != 2 ? "ticket-box-well" : "ticket-box-well ticket-box-well-none"}
              onClick={this.showCode.bind(this, item)} key={item.id}
            >
              <View className='ticket-well-num'>
                <View className='ticket-well-num-box'>
                  {item.code_type == 0 && <Text>核验码:{item.ticket}</Text>}
                  {item.code_type == 1 && <Text>汉字码</Text>}
                  {item.code_type == 2 && <Text>图片码</Text>}
                  {item.code_type == 3 && <Text>链接码</Text>}
                  {(item.code_type == 1 || item.code_type == 3) && <Text
                    onClick={this.onCopy.bind(this, item.ticket)}
                  >复制</Text>}
                  {(item.code_type == 0 || item.code_type == 2) && <View className='qr-code-image-not-meal'><Image
                    src='https://resource.ivcheng.com/upload/images/20211004/1633338584052_434.png' className='img'
                    mode='aspectFill'
                  /></View>}
                </View>
              </View>
              <View className='ticket-well-state'>
                <View>未使用</View>
                <View className='state'>{item.can_check_num}张</View>
              </View>
            </View>)}
          {/*套餐单品的核验码*/}
          {orderInfo.is_show_code && !!orderInfo.is_meal && groupIndexs.length <= 1 && orderTicket && orderInfo.open_tickets_hidden_by_sms != '1' &&
            <Block>
              {orderTicket.map((item, index) => <View
                className={item.type != 2 ? "ticket-box-well" : "ticket-box-well ticket-box-well-none"}
                onClick={this.goshowCode.bind(this, item)} key={item.id}
              >
                <View className='qr-code-image'><Image
                  src='https://resource.ivcheng.com/upload/images/20211004/1633338584052_434.png' className='img'
                  mode='aspectFill'
                /></View>
                <View className='ticket-well-num'>
                  <View className='ticket-well-num-box'><Text>套餐名称:{item.product_name}</Text></View>
                </View>
                {/*<View className='date'>可用时间:</View>*/}
                <View className='ticket-well-state'>
                  <View className='status-box'>
                    {item.reserve_is_use == 0 && Boolean(item.is_need_reserve) &&
                      <View className='no-reserve reserve-status'>未预约</View>}
                    {item.reserve_is_use == 1 && Boolean(item.is_need_reserve) &&
                      <View className='reserve-status'>已预约</View>}
                    {item.reserve_is_use == 5 && Boolean(item.is_need_reserve) &&
                      <View className='reserve-status'>部分预约</View>}
                    {((item.is_use < 1 || item.is_use > 5) && !Boolean(item.is_need_reserve)) && <Text>未使用</Text>}
                    {item.is_use == 5 && !Boolean(item.is_need_reserve) && <Text>部分使用</Text>}
                    {item.is_use == 4 && !Boolean(item.is_need_reserve) && <Text>已过期</Text>}
                    {item.is_use == 2 && !Boolean(item.is_need_reserve) && <Text>已失效</Text>}
                    {item.is_use == 1 && !Boolean(item.is_need_reserve) && <Text>已使用</Text>}
                    {item.is_need_reserve == 1 && <Text className='go-reserve' onClick={(e) => {
                      e.stopPropagation()
                      Taro.navigateTo({url: `/other/appointment/order?itemId=${item.appointmentId}&orderUUID=${orderInfo.uuid}&ticket=${item.ticket}`})
                    }}
                    >去预约</Text>}
                    {!!item.valid_date_start && orderInfo.meal_valid_date_set !== 1 && <Block>
                      <View>{item.valid_date_start} {item.valid_time_start} - {item.valid_date_end} {item.valid_time_end}
                      </View>
                    </Block>}
                  </View>
                  {/*<Block><Text className='reserve-time'>预约时间：{'2021-03-03——2021-03-03'}</Text></Block>*/}
                  {/*<Block><Text className='reserve-ticket'>预约码：{ item.ticket }</Text></Block>*/}
                  <View className='state'>{item.can_check_num}张</View>
                </View>
              </View>)}
            </Block>}
          {!!orderInfo.is_meal && groupIndexs.length > 1 && Array.from(groupTicket).map((val, key) =>
            <View className='groupTicket' key={key}>
              <View className='groupTicket-tips'>{orderInfo.meal_type}</View>
              {val.map((item, index) => <View key={item.id}
                className={item.type != 2 ? "ticket-box-well" : "ticket-box-well ticket-box-well-none"}
                onClick={this.goshowCode.bind(this, item)} key={item.id}
              >
                <View className='ticket-well-num'>
                  <View className='ticket-well-num-box'><Text>套餐名称:{item.product_name}</Text><Image
                    src={RESOURCE_URL + "/resources/weapp/images/ticketIcon.png"} mode='widthFix'
                  /></View>
                </View>
                <View className='ticket-well-state'>
                  {(item.is_use < 1 || item.is_use > 5) && <View>未使用</View>}
                  {item.is_use == 5 && <View>部分使用</View>}
                  {item.is_use == 4 && <View>已过期</View>}
                  {item.is_use == 2 && <View>已失效</View>}
                  {item.is_use == 1 && <View>已使用</View>}
                  {!!item.valid_date_start && <Block>
                    <View>{item.valid_date_start} {item.valid_time_start} - {item.valid_date_end} {item.valid_time_end}
                    </View>
                  </Block>}

                  <View className='state'>{item.can_check_num}张</View>
                </View>
              </View>)}
            </View>)}
          {logList.length > 0 &&
            <View className='log'>
              <View className='log-title'>
                使用记录
              </View>
              {logList.map((item, index) =>
                <View className='log-item' key={index}>
                  <View className='log-date'>{item.use_date}<Text>{item.check_num}张</Text></View>
                  <View className='log-date-info'>
                    <View className='group-product'>{item.product_name}</View>
                  </View>
                </View>
              )}
            </View>
          }
          {codeShow && <View className='show_code'>
            <View className='show_code_bj' onClick={this.hideCode.bind(this)} />
            {!aliTicketShow ? <View className='show_code_content'>
              <View className='show_code_suppliner'>{product_name}</View>
              <View className='show_code_box'>
                {ticketWxCode && wxCodeType != 2 && !orderInfo.inventoryTransshipment &&
                  <View className='ticketWxCode'><Image className='img' src={ticketWxCode} /></View>}{ticketCode &&
                <View className='ticketCode'><Image className='img'
                  src={BASE_URL + GET_IMG + this.scanUrl(ticketCode, 'second')}
                /></View>}
              </View>
              <View className='show_code_tips'>
                {popTicket && <View className='show_code_ticket'
                  onClick={this.onCopy.bind(this, popTicket)}
                >核验码：{popTicket}</View>}
                <View className='show_code_title'>出示该二维码即可消费该订单</View>
                <View className='show_code_desc'>避免商家网络不佳影响使用，建议截图保存
                  在相册</View>
              </View>
              <Image className='close' src={RESOURCE_URL + "/resources/weapp/images/codeOff.png"}
                onClick={this.hideCode.bind(this)}
              />
            </View> : <View className='show_code_content'>
              <View className='show_code_suppliner'>
                {product_name}
              </View>
              <View className='show_code_box'>
                <View className='ticketWxCode' onClick={this.aliPreviewCode.bind(this, popTicket)}>
                  <Image className='img' src={BASE_URL + GET_IMG + this.scanUrl(popTicket, 'second')} />
                </View>
              </View>
              <View className='show_code_tips'>
                <View className='show_code_ticket' onClick={this.onCopy.bind(this, popTicket)}>核验码：{popTicket}</View>
                <View className='show_code_title'>请使用口碑核销</View>
                <View className='show_code_desc'>避免商家网络不佳影响使用，建议截图保存
                  在相册</View>
              </View>
              <Image className='close' src={RESOURCE_URL + "/resources/weapp/images/codeOff.png"}
                onClick={this.hideCode.bind(this)}
              />
            </View>}
          </View>}
          {/*阿里本地生活的订单信息单独显示*/}
          {orderInfo && orderInfo.category === 8 && <View className='content'>
            <View className='titleTop'>订单信息</View>
            <View className='item'>
              <View className='title'>商品名称</View>
              <View className='text'>{orderInfo.product_name} </View>
            </View>
            <View className='item'><View className='title'>购买数量</View><View
              className='text'
            >{orderInfo && orderInfo.buy_amount}</View></View>
            <View className='item'><View className='title'>有效期</View><View
              className='text'
            >{orderInfo && orderInfo.can_use_date}</View></View>
            <View className='item'><View className='title'>下单时间</View><View
              className='text'
            >{orderInfo && orderInfo.offpay_date}</View></View>
            <View className='item'><View className='title'>订单号</View><View
              className='text'
            >{orderInfo && orderInfo.order_num}</View></View>
            <View className='item'><View className='title'>联系人</View><View
              className='text'
            >{orderInfo && orderInfo.linkman}</View></View>
          </View>}
          {orderInfo && orderInfo.category !== 8 && <View className='content'>
            <View className='titleTop'>订单信息</View>
            {orderInfo.address && disShow && <View className='head'>
              <View className='add-box'>
                <View className='add-icon-left'>
                  <AtIcon prefixClass='car' value='icondizhi' size='16' color='#fe9f00' />
                </View>
                <View className='add-cont'>
                  {orderInfo.linkman ? <View className='name'>{orderInfo.linkman}<Text>{orderInfo.phone}</Text></View> :
                    <View className='name'>自提点</View>}<View className='address'>{orderInfo.address}</View>
                </View>
              </View>
            </View>}
            <View className='item'>
              <View className='title'>商品名称</View>
              <View
                className='text'
              >{orderInfo.goods_group ? orderInfo.product_name : (orderInfo.category === 7 || orderInfo.category === 8) ? orderInfo.product_name : orderInfo.name} </View>
            </View>
            {orderInfo && orderInfo.mode_distribution && orderInfo.category === 0 && orderInfo.category === 4 &&
              <View className='item'><View className='title'>配送方式</View><View
                className='text'
              >{orderInfo && orderInfo.mode_distribution}</View></View>}
            {!!orderInfo && !!orderInfo.unit_fee && orderInfo.pay_type != 4 &&
              <View className='item'><View className='title'>商品单价</View><View
                className='text'
              >¥{orderInfo && orderInfo.unit_fee}</View></View>}
            {orderInfo && orderInfo.deal_remark && <View className='item'><View className='title'>拒绝原因</View><View
              className='text'
            >{orderInfo && orderInfo.deal_remark}</View></View>}
            <View className='item'><View className='title'>购买数量</View><View
              className='text'
            >{orderInfo && orderInfo.buy_amount}</View></View>
            {orderInfo && disShow && <View className='item'><View className='title'>购买人</View><View
              className='text'
            >{orderInfo && orderInfo.nick_name}</View></View>}
            {orderInfo && disShow && <View className='item'><View className='title'>接收人姓名</View><View
              className='text'
            >{orderInfo && (orderInfo.receiver || orderInfo.linkman || '')}</View></View>}
            {orderInfo && disShow && <View className='item'><View className='title'>接收人手机</View><View
              className='text'
            >{orderInfo && orderInfo.phone}</View></View>}
            {orderInfo && disShow && !!orderInfo.identity_num &&
              <View className='item'><View className='title'>接收人身份证</View><View
                className='text'
              >{orderInfo && orderInfo.identity_num}</View></View>}
            {!!orderInfo && !!orderInfo.meals && orderInfo.meals.length > 0 &&
              <View className='group' onClick={this.handleClickGroup.bind(this)}><View
                className='group-title'
              ><Text>套餐包含</Text> <View className='back-shop'>查看套餐<AtIcon
                value='chevron-right' color='#999' size='16'
              /></View></View></View>}
            {!!assembling_place_list && assembling_place_list.length > 0 &&
              <View className='group' onClick={this.handleAssembling.bind(this)}><View
                className='group-title'
              ><Text>集结地点</Text> <AtIcon
                value={openAssembling ? 'chevron-down' : 'chevron-right'} size='15' color='#ccc'
              /></View></View>}
            {!!orderInfo.buy_date && orderInfo.goodsType != 'product' && !orderInfo.valid_appointed_day && !orderInfo.is_meal &&
              <View className='item'><View
                className='title'
              >{((process.env.P_ENV === 'hiyogo' || process.env.P_ENV === 'vc') && orderInfo.valid_date_show_text) ? orderInfo.valid_date_show_text : '可用日期'}</View><View
                className='text'
              >{orderInfo && orderInfo.can_use_date}</View></View>}
            {!!orderInfo.buy_date && orderInfo.goodsType != 'product' && !!orderInfo.valid_appointed_day && !orderInfo.is_meal &&
              <View className='item'><View
                className='title'
              >{((process.env.P_ENV === 'hiyogo' || process.env.P_ENV === 'vc') && orderInfo.valid_date_show_text) ? orderInfo.valid_date_show_text : '可用日期'}</View><View
                onClick={() => {
                  this.setState({showCalendar: true})
                }} className='text'
              >查看</View></View>}
            {!!orderInfo.buy_date && orderInfo.goodsType != 'product' && !orderInfo.valid_appointed_day && !!orderInfo.is_meal && orderInfo.meal_valid_date_set === 1 &&
              <View className='item'><View
                className='title'
              >{((process.env.P_ENV === 'hiyogo' || process.env.P_ENV === 'vc') && orderInfo.valid_date_show_text) ? orderInfo.valid_date_show_text : '可用日期'}</View><View
                className='text'
              >{orderInfo && orderInfo.can_use_date}</View></View>}
            {!!orderInfo.buy_date && orderInfo.goodsType != 'product' && !!orderInfo.valid_appointed_day && !!orderInfo.is_meal && orderInfo.meal_valid_date_set === 1 &&
              <View className='item'><View
                className='title'
              >{((process.env.P_ENV === 'hiyogo' || process.env.P_ENV === 'vc') && orderInfo.valid_date_show_text) ? orderInfo.valid_date_show_text : '可用日期'}</View><View
                onClick={() => {
                  this.setState({showCalendar: true})
                }} className='text'
              >查看</View></View>}
            {!!orderInfo.validTimeMsg && orderInfo.goodsType != 'product' && !orderInfo.sale_style &&
              <View className='item'><View className='title'>生效时间</View><View
                className='text'
              >{orderInfo && orderInfo.validTimeMsg}</View></View>}
            {
              !!goodsGroup && goodsGroup.length > 0 && goodsGroup.map(item => (
                <Block>
                  {
                    item.num > 0 &&
                    <View className='item'>
                      <View className={classnames('title', {
                        ['title-over']: item.name.length > 6
                      })}
                      >{item.name}</View>
                      <View className='text'>{item.num}</View>
                    </View>
                  }
                </Block>
              ))
            }
            {orderInfo && orderInfo.col && orderInfo.col.length > 3 && orderInfo.arr && orderInfo.arr.length > 1 &&
              <View className='item'><View className='title'>{orderInfo.col[3].name}:</View><View
                className='text'
              >{orderInfo && orderInfo.arr[0].field_0}</View></View>}
            {orderInfo && orderInfo.face_photo && <View className='group-title item'
              onClick={this.showImgFace.bind(this, orderInfo.face_photo)}
            ><Text>接收人人脸:</Text><AtIcon
              value='chevron-right' size='15' color='#ccc'
            /></View>}
            {orderInfo && orderInfo.message && <View className='item'><View className='title'>留言</View><View
              className='text'
            >{orderInfo.message}</View></View>}
            {orderInfo && orderInfo.address && <View className='item'><View className='title'>接收人地址</View><View
              className='text'
            >{orderInfo && orderInfo.address}</View></View>}
            {orderInfo && orderInfo.defined_img &&
              <View className='group-title' onClick={this.showImg.bind(this, orderInfo)}><Text>图片</Text><AtIcon
                value='chevron-right' size='15' color='#ccc'
              /></View>}
            {orderInfo && orderInfo.remark && <View className='item'><View className='title'>备注</View><View
              className='text'
            >{orderInfo && orderInfo.remark}</View></View>}
            {orderInfo.pay_type != 4 && <View className='item'><View className='title'>订单金额</View><View
              className='text'
            >¥{orderInfo && orderInfo.total_fee}</View></View>}
            {!!orderInfo.coupon_discount_money && <View className='item'><View className='title'>优惠券抵扣</View><View
              className='text'
            >¥{orderInfo && orderInfo.coupon_discount_money}</View></View>}
            {orderInfo && (orderInfo.status == "已付款" || orderInfo.status == "已完成") && orderInfo.pay_type != 4 &&
              <View className='item'><View className='title'>支付方式</View><View
                className='text'
              >{orderInfo.useAccountPay_name}</View></View>}
            {orderInfo && orderInfo.coupon_nums && orderInfo.coupon_nums.length > 0 &&
              <View className='group' onClick={this.couponOpen.bind(this)}><View className='group-title'>兑换码:<View
                className='text'
              >{orderInfo.coupon_nums[0]}{orderInfo.coupon_nums.length > 1 &&
                <AtIcon value='chevron-right' size='15' color='#ccc' />}</View></View></View>}
            {orderInfo && orderInfo.offpay_date && <View className='item'><View className='title'>支付时间</View><View
              className='text'
            >{orderInfo && orderInfo.offpay_date}</View></View>}
            {orderInfo && orderInfo.pay_notice_mark &&
              <View className='item'><View className='title'>产品备注</View><View
                className='text'
              >{orderInfo && orderInfo.pay_notice_mark}</View></View>}
            {orderInfo && orderInfo.site_remark_for_customer &&
              <View className='item'><View className='title'>其他信息</View><View
                className='text'
              >{orderInfo && orderInfo.site_remark_for_customer}</View></View>}
            {orderInfo && orderInfo.pay_source_name &&
              <View className='item'><View className='title'>订单来源</View><View
                className='text'
              >{orderInfo && orderInfo.pay_source_name}</View></View>}
          </View>}
          {/* 单游客不展示, 多游客展示 20221020 | 0: 不展示, 1: 展示*/}
          {orderInfo && disShow && orderInfo.is_show_customer_info > 0 && <View className='content'>
            <View className='titleTop'>客户信息</View>
            {customerInfo && customerInfo.map((val, i) =>
              <View className='group-item group-item-item-top-style' key={i} key={i}>
                {customerInfo[i] && customerInfo[i].map((item, index) =>
                  <View key={index}>
                    {customerInfo[i][index].id === "upload_file" ?
                      <View className='group-title'
                        onClick={this.showImgCustomer.bind(this, customerInfo[i][index].value)}
                      >
                        <Text>图片</Text>
                        <AtIcon value='chevron-right' size='15' color='#ccc' />
                      </View> :
                      <View className='item'>
                        <View className='title'>{customerInfo[i][index].name}</View>
                        <View className='text'>{customerInfo[i][index].value}</View>
                      </View>
                    }
                  </View>
                )}
              </View>
            )}
            {!orderInfo.col && orderInfo.receiver && orderInfo.phone &&
              <View className='item' style='display: block;'>
                <View className='title'>姓名：<span className='text'>{orderInfo.receiver}</span></View>
                <View className='title'>电话：<span className='text'>{orderInfo.phone}</span></View>
              </View>

            }
          </View>}
          {orderInfo && orderInfo.meals && orderInfo.meals.length > 0 &&
            <AtFloatLayout isOpened={openGroup} title='套餐包含' onClose={this.handleClickGroup.bind(this)} scrollY>
              {orderInfo.meals.map((val, i) =>
                <View className='group-item' key={i} key={i}>
                  <View className='group-name'>
                    <View className='group-product'><Text>{val.product_name}</Text><Text
                      className='group-num'
                    >x{val.buy_amount}</Text></View>
                    <View className='group-company'>{val.company}</View>
                  </View>
                </View>
              )}
            </AtFloatLayout>}
          {orderInfo && orderInfo.coupon_nums && orderInfo.coupon_nums.length > 1 &&
            <AtFloatLayout isOpened={coupon} title='兑换码' onClose={this.couponOpen.bind(this)} scrollY>
              {orderInfo.coupon_nums.map((val, i) =>
                <View className='group-item' key={i} key={i}>
                  <View className='group-name'>
                    <View className='group-product'><Text>兑换码：</Text><Text className='group-num'>x{val}</Text></View>
                  </View>
                </View>
              )}
            </AtFloatLayout>}
          {assembling_place_list && assembling_place_list.length > 0 &&
            <AtFloatLayout isOpened={openAssembling} title='集合地点' onClose={this.handleAssembling.bind(this)}
              scrollY
            >
              {assembling_place_list.map((val, i) =>
                <View className='group-item' key={i} key={i}>
                  <View className='group-name'>
                    <View className='group-product'><Text>{val.assembling_place}</Text></View>
                  </View>
                </View>
              )}
            </AtFloatLayout>}
        </View>
        <AtFloatLayout isOpened={!!importText} title='查看信息' onClose={this.handleClose.bind(this)}>
          <Text selectable>{importText}</Text>
        </AtFloatLayout>
        <AtFloatLayout isOpened={showCalendar} title='有效期' onClose={this.calendarClose.bind(this)}>
          <AtCalendar validDates={orderInfo.valid_appointed_day} />
        </AtFloatLayout>
        <AtModal className='modal_concatWx' isOpened={modalShow} onClose={() => {
          this.setState({modalShow: false})
        }}
        >
          <AtModalHeader>联系客服</AtModalHeader>
          <AtModalContent>
            {qrImg && <Image
              mode='aspectFill'
              style='width: 120px;height: 120px;'
              src={qrImg}
            />}
          </AtModalContent>
          <AtModalAction>
            {process.env.TARO_ENV === 'h5' && <Text className='modal_txt'>
              有任何问题可添加<br />
              您的专属顾问进行咨询
            </Text>}
            {process.env.TARO_ENV !== 'h5' && <Text className='modal_txt'>
              有任何问题可添加\n
              您的专属顾问进行咨询
            </Text>}
          </AtModalAction>
        </AtModal>
        {
          process.env.TARO_ENV === 'tt' && <Block>
            {orderInfo.notice &&
              <View className='content'>
                <View className='titleTop'>使用须知</View>
                <View className='item'>
                  <rich-text preview selectable nodes={getContent(orderInfo.notice)} />
                </View>
              </View>}
            {orderInfo &&
              <View className='customer-service-box'>
                <View className='service-box-text'>对本订单有疑问或纠纷，请联系抖音官方客服或商家客服</View>
                <View className='service-box-button-box'>
                  <Button className='service-box-button' onClick={this.toService.bind(this)}>
                    <AtIcon value='icon icon-kefu-01' size='20' customStyle='margin-right: 2px' color='#000' />
                    抖音官方客服
                  </Button>
                  <Button className='service-box-button' open-type='contact'>
                    <AtIcon value='icon icon-kefu-01' size='20' customStyle='margin-right: 2px' color='#000' />
                    联系商家
                  </Button>
                </View>
              </View>}
          </Block>
        }
      </View>
    )
  }
}
